<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('批量入库列表')" />
    <link rel="stylesheet" href="./message.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="gray-bg">


     <div class="container-div">
        <div class="row">
            <div class="btn-group-sm" id="toolbar" role="group">

                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="piliangruku:rukuTest:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="piliangruku:rukuTest:edit">
                    <i class="fa fa-edit"></i> 修改
                </a>

                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="piliangruku:rukuTest:remove">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-success" shiro:hasPermission="gouhuoruku:rukuTest:inserts"
                   onclick="submitAll()">
                    <i class="fa fa-plus"></i> 提交本页
                </a>
                <a class="btn btn-label">
                    <div id="id2toggle" class="fa fa-toggle-off text-info fa-3x" onclick="inStart()">
                        <i class="fa" style="font-size: 45%;vertical-align:45%;">扫码枪录入</i>
                        <textarea id="msg2saoma" oninput="check2input4piliang()" style="height: 0;width: 0;border: 0;padding: unset"></textarea>
                    </div>
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <form name="form" method="post" action="/gouhuoruku/rukuTest/inserts" enctype="multipart/form-data"
                      id="from2Id">
                    <input name="msg" type="text" hidden readonly value="" id="msg">
                </form>
                <table id="bootstrap-table"></table>
            </div>
<!--            <textarea id="msg2saoma" oninput="check2input4piliang()"></textarea>-->
        </div>

<script src="./message.js"></script>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('piliangruku:rukuTest:edit')}]];
        var removeFlag = [[${@permission.hasPermi('piliangruku:rukuTest:remove')}]];
        var paymentMethodDatas = [[${@dict.getType('sys_pay')}]];
        var prefix = ctx + "piliangruku/rukuTest";

        function check2input4piliang() {
            var text = document.getElementById("msg2saoma").value
            console.log(text)
            if (text.search("\n") !== -1){
                onAdd()
            }
        }

        document.onmousemove = mouseMove;
        var oldx = 0,oldy = 0;
        function mouseMove(event) {
            if(document.getElementById("id2toggle").className ==="fa fa-toggle-on text-info fa-3x"){
                var e = event || window.event;
                var scrollx = document.documentElement.scrollLeft || document.body.scrollTop;
                var scrolly= document.documentElement.scrollTop || document.body.scrollTop;
                var x = e.pageX || e.clientX + scrollx;
                var y = e.pageY || e.clientY + scrolly;
                var input2saoma = document.getElementById("msg2saoma");
                const _select_ = document.activeElement
                if ((x !== oldx || y !== oldy)&&_select_ !== input2saoma){
                    document.getElementById("msg2saoma").focus()
                    //console.log(_select_)
                    oldx = x;oldy=y;
                }
            }
        }

        function inStart() {

            var id2toggle = document.getElementById("id2toggle").className
            if (id2toggle === "fa fa-toggle-on text-info fa-3x"){
                document.getElementById("id2toggle").className= "fa fa-toggle-off text-info fa-3x"
                document.getElementById("msg2saoma").blur()
            }else {
                document.getElementById("id2toggle").className= "fa fa-toggle-on text-info fa-3x"
                document.getElementById("msg2saoma").focus()
            }
        }

        function onAdd() {
            var msgStr = document.getElementById("msg2saoma").value
            $.ajax({
                type:"POST",
                datatype: "string",
                url: "/piliangruku/rukuTest/inserts",
                data: {"msg": msgStr},
                success: function (result) {
                    if (result.code===0) {
                        $.modal.msgSuccess('成功')
                    }else {
                        $.modal.msgError(result.msg)
                    }
                    document.getElementById("msg2saoma").value = ""
                    document.getElementById("msg2saoma").focus()
                },
                error : function() {
                    alert("录入失败");
                }
            });
        }
        
        function submitAll() {

            var msgv = $('input[name="msg"]')

            var tolength = $('table[id="bootstrap-table"]').children('tbody').children('tr').length
            for (var i = 0; i < tolength; i++) {
                var f_father = $('table[id="bootstrap-table"]').children('tbody').children('tr')[i]
                var fid = f_father.children[1].innerHTML.toString()
                var fdate = f_father.children[2].innerHTML.toString()
                var frukuMen = f_father.children[3].innerHTML.toString()
                var fshangpinName = f_father.children[4].innerHTML.toString()
                console.log(f_father.children[5].childNodes[0].src.toString())
                var ftupian = f_father.children[5].childNodes[0].src.toString()

                var fleibie = f_father.children[6].innerHTML.toString()
                var fguiGeKuan = f_father.children[7].innerHTML.toString()
                var fguiGeGao = f_father.children[8].innerHTML.toString()
                var fkaiXiang = f_father.children[9].innerHTML.toString()
                var fshuLiang = f_father.children[10].innerHTML.toString()
                var fdanJia = f_father.children[11].innerHTML.toString()
                var fzongjine = f_father.children[12].innerHTML.toString(),
                    fbei = f_father.children[13].innerHTML.toString();
                //console.log(document.getElementById("session2value").innerText.toString())
                $('input[name="msg"]').attr('value',msgv.val()
                        + "@fid：" + fid
                        + "；fdate：" + fdate + "；"
                        + "frukuMen：" + frukuMen
                        + "；fshangpinName：" + fshangpinName + "；"
                        + "ftupian：" + ftupian + "；"
                        + "fleibie：" + fleibie + "；"
                        + "fguiGeKuan：" + fguiGeKuan + "；"
                        + "fguiGeGao：" + fguiGeGao + "；"
                        + "fkaiXiang：" + fkaiXiang + "；"
                        + "fshuLiang：" + fshuLiang + "；"
                        + "fdanJia：" + fdanJia + "；"
                        + "fzongjine：" + fzongjine + "；"
                        + "fbei：" + fbei + "；")
            }
            $.ajax({
                type:"POST",
                datatype: "string",
                url: "/gouhuoruku/rukuTest/inserts",
                data: {"msg": msgv.val()},
                success: function (result) {
                    if (result.code===0) {
                        alert("提交成功");
                    }else {
                        alert("提交失败")
                    }
                },
                error : function() {
                    alert("提交失败");
                }
            });
            $("#form2Id").find('input[type=hidden]').each(function() {
                $(this).val('');
            });
            $('table[id="bootstrap-table"]').children('tbody').children('tr').empty()
        }

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "批量入库",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: '编号',
                        visible: false
                    },
                    {
                        field: 'gouhuoDanhao',
                        title: '购货单号'
                    },
                    {
                        field: 'chukuDate',
                        title: '购货日期'
                    },
                    {
                        field: 'rukuMen',
                        title: '入库操作人'
                    },
                    {
                        field: 'shangpinName',
                        title: '商品名称'
                    },
                    {
                        field: 'tupian',
                        title: '商品条码',
                        formatter: function (value, row, index) {
                            var actions = [];
                            actions.push('<img src="' + value + '" style="width: 150px;height: 150px;object-fit: contain"> ');
                            return actions.join('');
                            console.log(value)
                        }
                    },
                    {
                        field: 'shangpinLeibie',
                        title: '商品类别'
                    },
                    {
                        field: 'guiGeKuan',
                        title: '规格宽'
                    },
                    {
                        field: 'guiGeGao',
                        title: '规格高'
                    },
                    {
                        field: 'kaiXiang',
                        title: '开向'
                    },
                    {
                        field: 'shuLiang',
                        title: '商品数量'
                    },
                    {
                        field: 'danJia',
                        title: '商品单价'
                    },
                    {
                        field: 'zongjine',
                        title: '总金额'
                    },
                    {
                        field: 'beizhu',
                        title: '备注'
                    }]
            };
            $.table.init(options);
        });

    </script>
</body>
</html>